import { ColumnsType } from "antd/es/table";
import { columnDataIndex, columnRemark, columnOrder } from "@/columns";
import {SecurityUser} from "@/type/SecurityUser";
import {Space, Tag} from "antd";
import {Link} from "react-router-dom";

/** 根据用户的信息解析用户状态 */
const parseUserStatus = (_:number, user: SecurityUser) => {
    let msg = "正常";
    let color = "#1a8039";
    if (!user.enabled){
        msg = "用户禁用";
        color = "#cf1322";
    }else if (!user.accountNonLocked){
        msg = "用户锁定";
        color = "#460c59";
    }else if (!user.accountNonExpired){
        msg = "用户过期";
        color = "#732e11";
    }else if (!user.credentialsNonExpired){
        msg = "密码过期";
        color = "#776219";
    }
    return <Space>
        <Tag color={color}>{msg}</Tag>
    </Space>;
};

const userColumns: ColumnsType<SecurityUser> = [
    columnDataIndex,
    {
        key: 'id',
        dataIndex: 'id',
        title: '用户编号',
        width: 120,
        align: "center",
    },
    {
        key: 'username',
        dataIndex: 'username',
        title: '用户名',
        width: 120,
        align: "center",
    },
    {
        key: 'identity',
        dataIndex: 'identity',
        title: '用户身份',
        width: 120,
        align: "center",
    },
    {
        key: 'avatar',
        dataIndex: 'avatar',
        title: '用户头像',
        width: 120,
        align: "center",
    },
    {
        key: 'status',
        title: '用户状态',
        dataIndex: 'enabled',
        width: 105,
        align: "center",
        ellipsis: {showTitle: false},
        render: parseUserStatus
    },
    columnOrder,
    columnRemark,
    {
        key: "options",
        title: "操作",
        dataIndex: "options",
        align: "center",
        width: 120,
        fixed: "right",
        render: (_, record) => {
            return <Space>
                <Link key={"user-detail"} to={"detail"} state={{id: record.id}}>详情</Link>
                <Link key={"user-update"} to={"update"} state={{id: record.id}}>修改</Link>
                <Link key={"user-auth"} to={"auth"} state={record}>授权</Link>
            </Space>
        }
        // render: (_, record) => {
        //     return <Space>
        //         <Flex align={"flex-start"} gap={"small"} vertical>
        //             <Dropdown.Button type={"link"}
        //                              // menu={{ items: getItems(record)}}
        //             >
        //                 <Link to={"./details"} state={record}>详情</Link>
        //             </Dropdown.Button>
        //         </Flex>
        //     </Space>;
        // }
    }
];

export default userColumns;